<template>
    <div>
         <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 添加轮播图 -->
        <el-button style="margin-top:10px" size="small" type="danger" icon="el-icon-plus" @click="addClick()">
        添加轮播图</el-button>

        <el-alert style="margin-top:10px"
            title="首页展示，请合理设置权重,从1开始，权重越小，越优先展示！"
            type="success">
        </el-alert>
        <!--列表-->
    <el-table
        :data="tableForm"
        style="width: 100%">
          <el-table-column
                  prop="id"
                  label="编号"
                  width="180">
          </el-table-column>
          <el-table-column
              prop="url"
              label="图片地址"
              width="300px">
          </el-table-column>
          <el-table-column
              prop="url"
              label="图片">
              <template slot-scope="scope">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.url"
                        fit="contain"></el-image>
              </template>
          </el-table-column>

          <el-table-column
              prop="weight"
              label="权重"
              width="300px">
          </el-table-column>

           <el-table-column
            label="操作"
            
          >
              <template slot-scope="scope">  
                <el-button type="primary" size="small" @click="updateClick(scope.row)"><i class="el-icon-edit"/>编辑</el-button>
                
                <el-popconfirm
                        title="这是一段内容确定删除吗？"
                        @confirm="deleteClick(scope.row.id)"
                        >
                         <el-button slot="reference" type="danger" size="small">删除</el-button>
               </el-popconfirm>
              
              </template>
          </el-table-column>
    </el-table>

        <!--添加轮播图弹窗-->
        <el-dialog title="添加轮播图" :visible.sync="addVisible" width="30%">
        <el-upload
        class="upload-demo"
        ref="upload"
        action="http://localhost:8080/api/banner/upload"
        :on-success="uploadSuccess"
        :file-list="fileList"
        :limit="1"
         name="file"
        :data="level"
        :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">一次只能上传一个jpg/png文件，且不超过500kb</div>
        </el-upload>

        <div style="margin-top:10px;font-size:16px">权重:
            <el-input-number size="small" v-model="level.weight" :min="1" :max="10" label="描述文字"></el-input-number>
        </div>
            
        </el-dialog>

       
        <!--添加学生弹窗-->
        <el-dialog title="编辑" :visible.sync="updateVisible" width="25%">
            <el-form  :model="updateForm" label-width="80px" >
                
                
                <el-form-item hidden label="名称" >
                <el-input clearable style="width:200px" size="small" v-model="updateForm.id" ></el-input>
                </el-form-item>

                <el-form-item label="权重" >
                    <el-input-number size="small" v-model="updateForm.weight" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>


                <el-form-item>
            
                    <el-button  size="small" type="primary" @click="updateToBack">确 定</el-button>
                </el-form-item>
            </el-form>
            
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
        updateForm:{
            id:"",
            weight:""
        },
         fileList:[],
         addVisible: false,
         updateVisible:false,
         tableForm:[],
         level:{
             weight:1
         }
        }
    },
    created(){
        this.getList();
    },
    methods:{
        deleteClick(id){ //删除
            this.$api.get('/banner/deleteCarMap/'+id,'',Response=>{
                if(Response.data.code == 200){
                       this.$message.success('成功');
                       this.getList();
                }
            })
        },
        updateToBack(){ //更新
            this.$api.post('/banner/updateCarMapWeight',this.updateForm,Response=>{
                if(Response.data.code == 200){
                       this.$message.success('成功');
                       this.getList();
                       this.updateVisible = false;
                    }else{
                        this.$message.success('失败');
                    }
            })
        },
        updateClick(datas){
            this.updateForm.id = datas.id;
            this.updateForm.weight = datas.weight;
            this.updateVisible = true; 
        },
        getList(){ //获取数据
            this.$api.get('/banner/getCarMap','',Response=>{
                if(Response.data.code == 200){
                       this.tableForm = Response.data.data;
                    }
            })
        },
        addClick(){ //添加轮播图
            this.addVisible = true
        },
        submitUpload() { //上传
            
            this.$refs.upload.submit();
        },
       uploadSuccess(response, file, fileList){
            if(response.code == 200){
                this.$message.success('上传成功');
                this.fileList = []
                this.addVisible =false
                this.getList();
            }else{
                this.$message.error('上传失败');
            }
       }
    }
}
</script>